<template>
    <div class="app-container">
        <el-row :gutter="20">
            <el-col>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                            v-hasPermi="['system:user:add']">新增</el-button>
                    </el-col>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
                </el-row>

                <el-table v-loading="loading" :data="userList">
                    <el-table-column label="打卡id" align="center" key="id" prop="id" :show-overflow-tooltip="true" />
                    <el-table-column label="标题" align="center" key="title" prop="title" />
                    <el-table-column label="打卡状态" align="center" prop="state">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.szpt_state" :value="scope.row.state" />
                        </template>
                    </el-table-column>
                    <el-table-column label="开始时间" align="center" key="startTime" prop="startTime" />
                    <el-table-column label="结束时间" align="center" key="endTime" prop="endTime" />
                    <el-table-column label="验证码" align="center" key="code" prop="code" />
                    <el-table-column label="状态" align="center" prop="status">
                        <template slot-scope="scope">
                            <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" align="center" prop="createTime" v-if="columns[6].visible" width="160">
                        <template slot-scope="scope">
                            <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
                        <template slot-scope="scope" v-if="scope.row.userId !== 1">
                            <el-button size="mini" type="text" icon="el-icon-circle-check"
                                @click="handleCommand('basicinformation', scope.row)">详情</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <pagination v-show="total > 0" :total="total" :page.sync="ljc.pageNum" :limit.sync="ljc.pageSize"
                    @pagination="getList" />
            </el-col>
        </el-row>
        <!-- 添加或修改用户配置对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-steps :active="active" finish-status="success">
                <el-step title="任务详情"></el-step>
                <el-step title="验证码和持续时间"></el-step>
            </el-steps>
            <el-form ref="form" :model="form" :rules="rules" key v-if="active === 1">
                <el-row>
                    <el-col>
                        <el-form-item label="任务名称" prop="title">
                            <el-input v-model="form.title" placeholder="任务名称" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="任务详情" prop="content">
                            <el-input v-model="form.content" placeholder="任务详情" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-form ref="form" :model="form" :rules="rules" key v-if="active === 2">
                <el-row>
                    <el-col>
                        <el-form-item label="验证码" prop="code">
                            <el-input v-model="form.code" placeholder="验证码" maxlength="11" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-button @click="random">随机生成验证码</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions"
                                value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" align="right">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="active === 2">
                <el-button type="primary" @click="submitForm" style="margin-top: 12px;">确 定</el-button>
                <el-button @click="cancel" style="margin-top: 12px;">取 消</el-button>
            </div>
            <el-button-group>
                <el-button style="margin-top: 12px;" @click="pre">上一步</el-button>
                <el-button style="margin-top: 12px;" @click="next" v-if="active === 1">下一步</el-button>
            </el-button-group>
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import api from "../../../api/management/api"
export default {
    name: "User",
    dicts: ['sys_normal_disable', 'sys_user_sex', 'szpt_state'],
    components: { Treeselect },
    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近1分钟',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 60 * 1000);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近5分钟',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 60 * 1000 * 5);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近10分钟',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        end.setTime(start.getTime() + 60 * 1000 * 10);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: '',
            radio: 3,

            active: 1,
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 用户表格数据
            userList: null,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 默认密码
            initPassword: undefined,
            // 日期范围
            dateRange: [],
            // 岗位选项
            postOptions: [],
            // 角色选项
            roleOptions: [],
            // 表单参数
            form: {},
            defaultProps: {
                children: "children",
                label: "label"
            },
            // 用户导入参数
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                // url: process.env.VUE_APP_BASE_API + '/szpt/memberMsg/import',
                url: process.env.VUE_APP_BASE_API + '/szpt/memberMsg/importData',
            },
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined
            },
            // 列信息
            columns: [
                { key: 0, label: `党员编号`, visible: true },
                { key: 1, label: `党员名称`, visible: true },
                { key: 2, label: `性别`, visible: true },
                { key: 3, label: `部门`, visible: true },
                { key: 4, label: `手机号码`, visible: true },
                { key: 5, label: `状态`, visible: true },
                { key: 6, label: `创建时间`, visible: false }
            ],
            // 表单校验
            rules: {
                name: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                    { min: 2, max: 20, message: '长度必须介于 2 和 20 之间', trigger: 'blur' }
                ],
                gender: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                ethnicity: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                nativePlace: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                educationBackground: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                graduationSchoolMajor: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                registeredResidence: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                currentResidence: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                idNumber: [
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                contactNumber: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
                photoUrl: [
                    { required: true, message: "该项不能为空", trigger: "blur" },
                ],
            },
            titlePicFile: {
                // 图片真实地址
                originalQualityPaths: '',
                // 图片压缩后的地址
                lowQualityPaths: '',
            },
            data: {
                // "pageNum": 1,
                // "pageSize": 1,
                // "name": "",
                // "idNumber": "",
                // "startTime": "",
                // "endTime": "",
                // "status": 0,
                "szMembermsg": {
                    "pageNum": 1,
                    "pageSize": 100,
                    // "name": "",
                    // "idNumber": "",
                    // "startTime": "",
                    // "endTime": "",
                    // "status": 0,
                },
                "sort": 1,
            },
            ljc: {
                "pageNum": 1,
                "pageSize": 10,
            },
            modify_or_new: 0,
        };
    },
    created() {
        this.ceshi();
        this.getList();
        this.getConfigKey("sys.user.initPassword").then(response => {
            this.initPassword = response.msg;
        });
        this.getConfigKey("management.message.url").then((res) => {
            this.uploadurl = res.msg + '/szpt/file/uploadImage';
            // console.log(this.uploadurl);
        })
    },
    methods: {
        random() {
            const length = 4; // 验证码的长度
            const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
            let res = '';
            for (let i = length; i > 0; --i) res += chars[Math.floor(Math.random() * chars.length)];
            this.form.code = res;
        },
        next() {
            if (this.active++ > 3) this.active = 1
        },
        // 步骤条上一步的方法
        pre() {
            if (this.active-- < 2) this.active = 1
        },
        ceshi() {
        },
        /** 查询用户列表 */
        getList() {
            this.loading = true;
            api.checkin_list(this.ljc).then((res) => {
                this.userList = res.data.pageInfo.list;
                this.total = res.data.pageInfo.total;
                console.log(this.userList);
                // console.log(this.total);
                this.loading = false;
            })
        },
        // 筛选节点
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        // 节点单击事件
        handleNodeClick(data) {
            this.queryParams.deptId = data.id;
            this.handleQuery();
        },
        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                "type": undefined,
                "code": undefined,
                "startTime": undefined,
                "endTime": undefined,
                "title": undefined,
                "content": undefined,
                "scope": undefined,
            };
            this.imageUrl = "";
            // this.resetForm("form");
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            // this.queryParams.deptId = undefined;
            // this.data = {
            //     "szMembermsg": {
            //         "name": "",
            //         "currentPartyBranch": ""
            //     },
            //     "sort": 1,
            //     "pageSize": 100,
            //     "pageNum": 1
            // };
            this.ljc = {};
            // this.$refs.tree.setCurrentKey(null);
            this.handleQuery();
        },
        // 更多操作触发
        handleCommand(command, row) {
            switch (command) {
                case "handleResetPwd":
                    this.handleResetPwd(row);
                    break;
                case "handleAuthRole":
                    this.handleAuthRole(row);
                    break;
                case "basicinformation":
                    this.basicinformation(row);
                default:
                    break;
            }
        },
        /** 新增按钮操作 */
        handleAdd() {
            this.active = 1;
            this.reset();
            this.open = true;
            this.title = "添加用户";
            this.modify_or_new = -1;
        },
        /** 分配角色操作 */
        handleAuthRole: function (row) {
            const userId = row.userId;
            // this.$router.push("/system/user-auth/role/" + userId);
            this.$router.push("/management/basicinformation");
        },
        basicinformation: function (row) {
            this.$router.push({
                path: "/management/basicinformation",
                query: { row: row, type: "clockin" }
            });
        },
        /** 提交按钮 */
        submitForm: function () {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    this.form.startTime = this.dateRange[0];
                    this.form.endTime = this.dateRange[1];
                    console.log(this.form.startTime);
                    console.log(this.form.endTime);
                    api.checkin_save(this.form).then((res) => {
                        this.$modal.msgSuccess("新增成功");
                        this.open = false;
                        this.getList();
                        console.log("ljc");
                        console.log(res);
                    })
                    this.active = 1;
                    this.reset();
                }
            });
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        }
    }
};
</script>